<template>
  <div class="svg">
    <svg>
      <defs>
        <radialGradient :id="borderColor">
          <stop offset="60%" :stop-color="'transparent'"/>
          <stop offset="100%" :stop-color="border_color"/>
        </radialGradient>
      </defs>
      <circle cx="50" cy="50" r="48" :stroke="border_color" stroke-width="2" fill="transparent"/>
      <circle cx="50" cy="50" r="40" :stroke="border_color" stroke-width="2" :fill="`url(#${borderColor})`"/>
      <circle cx="50" cy="50" r="36" :stroke="background_color" stroke-width="10" fill="none" class="processLine" style="" />
    </svg>
    <div class="box">
      <div class="box_item" v-for="i in box_item_number" :key="i"></div>
    </div>
    <div class="txt">{{percentValue}}%</div>
  </div>
</template>
<script setup>
import {computed} from 'vue'
const props = defineProps({
  percent:{
    type:Number,
    default: () => 0
  },
  borderColor:{
    type:String,
    default: () => ''
  },
  backgroundColor:{
    type:String,
    default: () => ''
  },
})
const percentValue = computed(() => {
  return props.percent
})
const border_color = computed(() => {
  return props.borderColor
})
const background_color = computed(() => {
  return props.backgroundColor
})
const stroke_dasharray = computed(() => {//进度值
  return Math.floor(percentValue.value * 226 / 100)
})
const box_item_number = computed(() => {//刻度数量
  return Math.ceil(percentValue.value * 12 / 100)
})
</script>
<style scoped lang="scss">
.svg{
  width: 100px;
  height:100px;
  background: #030B18;
  position: relative;
  transform: rotate(-90deg);
  .processLine{
    stroke-dasharray: v-bind('stroke_dasharray'), 226;
    stroke-dashoffset: 0;
  }
}
.box{
  width:80px;
  height:80px;
  border-radius: 50%;
  background: transparent;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%) rotate(90deg);
  &_item{
    width:2px;
    height:10px;
    background: #030B18;
    position: absolute;
    top:calc(50% - 5px);
    left:calc(50% - 1px);
    &:nth-child(1){
      transform: rotate(0deg) translate(0,-36px);
    }
    &:nth-child(2){
      transform: rotate(30deg) translate(0,-36px);
    }
    &:nth-child(3){
      transform: rotate(60deg) translate(0,-36px);
    }
    &:nth-child(4){
      transform: rotate(90deg) translate(0,-36px);
    }
    &:nth-child(5){
      transform: rotate(120deg) translate(0,-36px);
    }
    &:nth-child(6){
      transform: rotate(150deg) translate(0,-36px);
    }
    &:nth-child(7){
      transform: rotate(180deg) translate(0,-36px);
    }
    &:nth-child(8){
      transform: rotate(210deg) translate(0,-36px);
    }
    &:nth-child(9){
      transform: rotate(240deg) translate(0,-36px);
    }
    &:nth-child(10){
      transform: rotate(270deg) translate(0,-36px);
    }
    &:nth-child(11){
      transform: rotate(300deg) translate(0,-36px);
    }
    &:nth-child(12){
      transform: rotate(330deg) translate(0,-36px);
    }
  }
}
.txt{
  color:v-bind('background_color');
  font-size: 22px;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%) rotate(90deg);
}
</style>